// 一、注释 
// 1.less的注释 ，在less文件中的注释，这个注释内容不会被编译
// 这个是less的注释 

// 2.是css的注释 
// .box{
//     /* 这个是css注释，会被编译出来 */
//     width: 100px;
//     height: 100px;
//     background-color: red;
// }

// 二、less中的嵌套 
//1. less中的嵌套可以根据 dom结构
// .outer{
//     width: 100px;
//     height: 100px;
//     .inner{
//         width: 50px;
//         height: 50px;
//         .smaller{
//             width: 20px;
//             height: 20px;
//         }
//     }
// }

// 2.嵌套的过程中可以通过 & 符号引用父级 名称 
// .box{
//     width: 100px;
//     height: 100px;
//     background-color: red;
//     // .box:hover{
//     //     background-color: blue;
//     // }
//     &:hover{
//         background-color: blue;
//     }
// }

// 三 less里的变量 ； @变量名称:0px
// 1.定义和使用变量 
// @v:0px;
// @w:100px;
// @h:@w;
// .box{
//     position: absolute;
//     left: @v;
//     top:@v;
//     width: @w;
//     height: @h;
// }

// 2.变量作为选择器的名称 
// less里的插值 ；${变量}
// @mydiv:.box;
// @{mydiv}{
//     width: 100px;
//     height: 100px;
//     background-color: red;
// }


// 3.变量可以做运算； + - * / ;
// 加法操作 
// @a:10px;
// @b:20px;
// .box{
//     width: @a*@b;
//     height: 200px;
//     background-color: red;
// }

// 减法操作
// @a:10px;
// @b:20px;
// .box{
//     width: @b - @a;
//     height: 200px;
//     background-color: red;
// }

// 加法运算

// @a:10px;
// @b:20px;
// .box{
//     width: @b + @a;
//     height: 200px;
//     background-color: red;
// }


// 除法: 注意 除法需要加上小括号 来包裹起来

// @a:10px;
// @b:20;
// .box{
//     width: (@b / @a);
//     height: 200px;
//     background-color: red;
// }